<template>
  <div>
    <a-list size="small" bordered :dataSource="fileList">
      <div slot="header">
        <a-button :disabled="(singleFile && fileList.length>0)" @click="uploadFile" style="width:100%" type="dashed">{{ data ? '上传'+data.fieldAliase: uploadBtnText }}</a-button>
      </div>
      <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
        <div style="width:90%">{{ item.name }}</div>
        <div>
          <a-popconfirm title="确定要删除该文件吗？" @confirm="removeFile(item.fileUid)" okText="确认" cancelText="取消">
            <a-tag color="red">删除</a-tag>
          </a-popconfirm>
        <!--  <a-tag color="green" @click="previewOpen(item)">预览</a-tag> -->
        </div>
      </a-list-item>
    </a-list>
    <simple-vue-upload :ref="data.fieldCode" @uploadOk="uploadOk" />
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewCancel">
      <video :src="fileSrc" width="100%" controls="controls" autoplay="autoplay">您的浏览器不支持视频预览。</video>
    </a-modal>
  </div>
</template>

<script>
  import store from '@/store'
  import { DEFAULT_SITE } from '@/store/mutation-types'
  import storage from 'store'
  import SimpleVueUpload from '@/components/SimpleVueUpload/SimpleVueUpload.vue'
  import { deleteFile } from '@/api/site/upload.js'
  export default {
    name: 'FileUploadList',
    components: {
      SimpleVueUpload
    },
    props: {
      uploadBtnText: {
        type: String,
        default: '文件上传'
      },
      data: {
        type: Object,
        required: true
      },
      fieldName: {
        type: String,
        default: ''
      },
      singleFile: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        fileList: [],
        previewVisible: false,
        fileSrc: null,
        headers: {
          Authorization: 'bearer  ' + store.getters.token,
           'Default-Site': storage.get(DEFAULT_SITE)
        }
      }
    },
    created () {},
    methods: {
      uploadFile () {
        this.$refs[this.data.fieldCode].openUpload('/*')
      },
      uploadOk (response) {
        if (response.code === 0) {
          const file = response.res
          if (file) {
             const fileObj = {
               uid: file.fileUid,
               fileUid: file.fileUid,
               name: file.fileName,
               status: 'done',
               url: file.fileFullPath
             }
             this.fileList.push(fileObj)
          }
        }
      },
      removeFile (fileUid) {
       if (fileUid) {
         deleteFile({
           fileUid: fileUid
         }).then(response => {
           if (response.code === 0) {
             const fileList = this.fileList.filter(item => fileUid !== item.fileUid)
             if (fileList) {
                 this.fileList = fileList
             }
             console.log('delete file success')
           }
         })
       }
      },
      setFieldValue (value) {
           if (value && value instanceof Array) {
             this.fileList = value
           } else {
             this.fileList = []
           }
      },
      getFieldValue () {
        return this.fileList || []
      },
      fieldClear () {
        this.fileList = []
      },
      previewOpen (item) {
        console.log(item)
        this.previewVisible = true
      },
      previewCancel () {
         this.previewVisible = false
      }
    }
  }
</script>
